<!-- eslint-disable vue/valid-v-model -->
<template>
  <el-dialog :title="form.ownerId?'修改工单':'新增工单'" :visible="visible" @close="closeFn">
    <el-form
      class="form"
      :rules="formrules"
      ref="form"
      :model="form"
      width="200px"
    >
      <!--               点位名称               -->
      <el-form-item prop="name" label="点位名称">
        <el-col :span="19">
          <el-input
            size="medium"
            maxlength="15"
            placeholder="请输入"
            show-word-limit
            v-model="form.name"
          ></el-input>
        </el-col>
      </el-form-item>
      <!--                                    所在区域                     -->
      <el-form-item prop="regionId" label="所在区域">
        <el-select
          size="medium"
          class="a1"
          v-model="form.regionId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in getPointListAll"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!--                                    所属商圈                     -->
      <el-form-item prop="businessId" label="所属商圈">
        <el-select
          size="medium"
          class="a1"
          v-model="form.businessId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in businessType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--                                    归属合作商                     -->
      <el-form-item prop="ownerName" label="归属合作商">
        <el-select
          size="medium"
          class="a1"
          v-model="form.ownerId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in getpartner"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--                                    详细地址                     -->
      <el-form-item prop="areaCode" label="详细地址">
        <el-cascader
          :options="options"
          @change="handleChange"
          filterable
          v-model="form.areaCode"
          :props="{ value: 'label' }"
          placeholder="省/市/区"
        ></el-cascader>
      </el-form-item>

      <el-form-item prop="addr">
        <el-input
          type="textarea"
          class="a2"
          v-model="form.addr"
          :autosize="{ minRows: 3, maxRows: 8 }"
          maxlength="40"
          placeholder="请输入备注不能超过40个字哦"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button class="btn" @click="closeFn">取 消</el-button>
      <el-button class="btn" type="primary" @click="newCard">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getpartner, businessType, newList, modifyList } from '@/api/point'
import { regionData, TextToCode } from 'element-china-area-data'
// import { number } from 'echarts'

export default {
  async created () {
    const {
      data: { currentPageRecords }
    } = await getpartner()
    const { data } = await businessType()
    this.getpartner = currentPageRecords
    this.businessType = data
    console.log(this.businessType)
    console.log(this.getpartner)
    console.log(this.getPointListAll)
  },
  watch: {
    visible () {
      // if (this.visible === true && this.ListA) {
      //   this.form.regionName = this.ListA.name
      //   this.form.remark = this.ListA.remark
      //   this.form.id = this.ListA.id
      // }
    }
  },
  methods: {
    // 封装的省市区
    handleChange (value) {
      this.$emit('provincesValueChang', value)
    },

    closeFn () {
      this.form = {
        addr: '',
        areaCode: '',
        businessId: '',
        createUserId: '',
        name: '',
        ownerId: '',
        ownerName: '',
        regionId: ''
      }
      this.$refs.form.resetFields()
      this.$emit('closeFn')
    },
    async newCard () {
      const area = `${this.form.areaCode[0]}-${this.form.areaCode[1]}-${this.form.areaCode[2]}`
      this.form.areaCode = `${this.form.areaCode[0]}/${this.form.areaCode[1]}/${this.form.areaCode[2]}`
      console.log(this.form.areaCode)
      this.form.addr = `${area}-${this.form.addr}`
      this.form.areaCode =
        TextToCode[this.form.areaCode.split('/')[0]][
          this.form.areaCode.split('/')[1]
        ][this.form.areaCode.split('/')[2]].code
      const str = this.getpartner.find(item => {
        if (item.id === this.form.ownerId) {
          return item
        }
        return item
      })
      this.form.ownerName = str.name
      if (this.form.ownerId) {
        await modifyList(this.form).then(() => {
          this.$emit('closeFn')
          this.$refs.form.resetFields()
        }).catch((res) => {
          this.$message(res.response.data)
        })
      } else {
        await newList(this.form).then(() => {
          this.$emit('closeFn')
          this.form.ownerName = ''
          this.$refs.form.resetFields()
        }).catch((res) => {
          this.$message(res.response.data)
        })
      }
    }
  },
  computed: {
    'form.addr': {
      set (val) {
        this.$emit('input', val)
      },
      get (val) {
        return this.form.addr
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    change: {
      type: Number,
      required: true
    },
    ListA: {
      type: Object,
      required: true
    },
    getPointListAll: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 封装的省市区
      options: regionData,
      selectedOptions: [],

      businessType: [], // 合作商列表
      getpartner: [], // 商圈列表
      formrules: {
        addr: [
          { required: true, message: '这玩意儿不能不填呢', trigger: 'blur' }
        ],
        areaCode: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ],
        businessId: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        createUserId: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ],
        name: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        ownerId: [{ required: true, message: '这个也得填呢', trigger: 'blur' }],
        ownerName: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '这个也得填呢', trigger: 'blur' }
        ]
      },
      form: {
        addr: '',
        areaCode: '',
        businessId: '',
        createUserId: 1,
        name: '',
        ownerId: '',
        ownerName: '',
        regionId: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 25px;
  width: 40%;
  // height: 530px;
}
::v-deep .el-col {
  height: 38px;
  // padding: 15px;
}
::v-deep .el-form-item__label {
  width: 100px;
}
::v-deep .el-dialog__body {
  padding: 10px 30px;
}
.a1 {
  width: 79%;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
  // margin-left: 10px;
}
.a2 {
  padding-top: 10px;
  padding-left: 100px;
  width: 80%;
}
</style>
